/**
 * 格式化日期
 * @param {number} data 
 */
/**
 * @param {string} fmt  格式
 * @param {number} date 等待转化的日期数据
 */
function formatDate(fmt, date) {
  let ret;
  let opt = {
    "Y+": date.getFullYear().toString(),        // 年
    "m+": (date.getMonth() + 1).toString(),     // 月
    "d+": date.getDate().toString(),            // 日
    "H+": date.getHours().toString(),           // 时
    "M+": date.getMinutes().toString(),         // 分
    "S+": date.getSeconds().toString()          // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt);
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")));
    };
  };
  return fmt;
}


/**
 * 用户头像 和 名字
 * @typedef {object} AvatarProps 用户信息
 * @property {string} author.avatarUrl 用户头像图片路径
 * @property {string} author.name 用户名
 */

/**
 * 用户头像 和 名字
 * @param {object} props
 * @param {AvatarProps} props.author
 * @return {Element}
 */
function Avatar(props) {
  return (
    <div className="UserInfo">
      <img
        className="Avatar"
        src={props.author.avatarUrl}
        alt={props.author.name}
        title={props.author.name}
      />
      <div className="UserInFo-name">{props.author.name}</div>
    </div>
  );
}

/**
 * 用户评论参数
 * @typedef {object} CommentProps 
 * @property {AvatarProps} author 用户信息
 * @property {string} text 用户评论
 * @property {number} data 评论日期
 */

/**
 * 用户评论
 * @param {CommentProps} props 用户评论参数
 * @return {Element}
 */
function Comment(props) {
  return (
    <div className="Comment clearfix">
      <Avatar author={props.author} />
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-data">{formatDate("YYYY-mm-dd HH:MM", props.date)}</div>
    </div>
  );
}

const author = { avatarUrl: "../../images/avatar.jpg", name: "shanliangdeYWJ" };
ReactDOM.render(
  <Comment author={author} text="NING HAO YA !" date={new Date()} />,
  document.getElementById("root")
);

